<template>
  <div class="haha">
    <el-main>
      <el-tabs style="margin-left: -18px">
        <el-tab-pane
          label="所有宝贝"
          name=""
          style=":hover:background-color:red;"
        ></el-tab-pane>
    
        
      </el-tabs>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><span @click="getAll">所有分类</span></el-breadcrumb-item>
        <!-- <el-breadcrumb-item>所有分类</el-breadcrumb-item> -->
        <el-breadcrumb-item>{{kind}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 所有分类 -->
      <div class="kind">
        <!-- <el-link type="info" style="color: black">下装</el-link>
        <el-link type="info" style="color: black">上衣</el-link>
        <el-link type="info" style="color: black">饰品</el-link>
        <el-link type="info" style="color: black">鞋类</el-link> -->
        <!-- 标签页 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="下装" name="xz">
            <div v-if="!noKind" class="setion">
              <span style="color: rgb(154, 154, 154); user-select: none">您是不是想找：</span>
              <el-link @click="getByType(t)" v-for="t in type[0]['下装']" :key="t" type="info" style="color: black">{{t}}</el-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="上衣" name="sy">
            <div v-if="!noKind" class="setion">
              <span style="color: rgb(154, 154, 154); user-select: none">您是不是想找：</span>
              <el-link @click="getByType(t)" v-for="t in type[0]['上衣']" :key="t" type="info" style="color: black">{{t}}</el-link>
            </div>  
          </el-tab-pane>
          <el-tab-pane label="饰品" name="sp">
            <div v-if="!noKind" class="setion">
              <span style="color: rgb(154, 154, 154); user-select: none">您是不是想找：</span>
              <el-link @click="getByType(t)" v-for="t in type[0]['饰品']" :key="t" type="info" style="color: black">{{t}}</el-link>
            </div>  
          </el-tab-pane>
          <el-tab-pane label="鞋类" name="xl">
            <div v-if="!noKind" class="setion">
              <span style="color: rgb(154, 154, 154); user-select: none">您是不是想找：</span>
              <el-link @click="getByType(t)" v-for="t in type[0]['鞋类']" :key="t" type="info" style="color: black">{{t}}</el-link>
            </div>  
          </el-tab-pane>
        </el-tabs>
        <!-- 所有小类 -->
        <div v-if="noKind" class="alltypes">
              <span style="color: rgb(154, 154, 154); user-select: none">您是不是想找：</span>
              <el-link @click="getByType(t)" class="type" v-for="t in type[0]['下装']" :key="t" type="info" style="color: black">{{t}}</el-link>
              <el-link @click="getByType(t)" class="type" v-for="t in type[0]['上衣']" :key="t" type="info" style="color: black">{{t}}</el-link>
              <el-link @click="getByType(t)" class="type" v-for="t in type[0]['饰品']" :key="t" type="info" style="color: black">{{t}}</el-link>
              <el-link @click="getByType(t)" class="type" v-for="t in type[0]['鞋类']" :key="t" type="info" style="color: black">{{t}}</el-link>
        </div>
      
      </div>
      <!--———————————以下注释掉的部分为后续完善时使用 ——————————————————— -->
      <!-- <div class="xiaohuihui">
        <el-dropdown>
          <el-button type="primary" class="zonghexinxi">
            综合信息<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>综合信息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <el-button type="primary" class="zonghexinxi">
            销量<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>销量从高到低</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <el-button type="primary" class="zonghexinxi">
            信用<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>信用从高到低</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <el-button type="primary" class="zonghexinxi">
            价格<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>价格从高到低</el-dropdown-item>
            <el-dropdown-item>价格从低到高</el-dropdown-item>
            <el-dropdown-item>总价从高到低</el-dropdown-item>
            <el-dropdown-item>总价从低到高</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->
      <!-- <div class="baoyou">
        <template>
          <el-checkbox-group v-model="checkList" style="width: 95%; margin: 5px">
          <el-checkbox label="包邮"></el-checkbox>
          <el-checkbox label="赠送退货运费险"></el-checkbox>
          <el-checkbox label="新品"></el-checkbox>
          <el-checkbox label="七天内退货"></el-checkbox>
          <el-checkbox label="正品保障"></el-checkbox>
          <el-checkbox label="公益宝贝"></el-checkbox>
          <el-checkbox label="海外商品"></el-checkbox>
        </el-checkbox-group>
        </template>

        <el-row>
          <el-button type="success" size="small"> 合并同款宝贝 </el-button>
        </el-row>
      </div> -->

      <!-- 主区域 商品具体内容-->
     <!-- <h1>暂时没有符合条件的商品</h1> -->
      <div v-if="commodityData">
        <!-- 主区域循环展示 -->
        <div class="item" v-for="(c,i) in commodityData" :key="i">
          <div class="imagesetion">
            <img class="shangpintu" :src="require('../../../../item-server/router/components/commodity/'+ c.img.split(',')[0])" alt="" />
          </div>
          <div style="margin-top: 10px">
            <span class="jiage">¥{{c.price}}</span>
            <span class="xiaobaoyou">包邮</span>
            <span class="fukuan">2万+人付款</span>
          </div>
          <div class="jieshao">
            <a href="#" class="jieshao">{{c.commodity}}</a>
          </div>
          <div style="margin-top: 10px">
            <i class="el-icon-s-unfold" style="color: red; font-size: 20px"></i>
            <a href="#" style="color: rgb(136, 136, 136); font-size: 10px">{{c.user_name}}</a>
            <span class="didian">{{c.addr.split(',')[0]}}</span>
          </div>
          <img class="xiaologo" src="../../assets/logo.png" alt="" />
        </div>


      </div>
     
   
    </el-main>
    <!-- 右侧边区域 -->
    <div class="youce">
      <el-tabs>
        <el-tab-pane
          label="商家热卖"
          name="first"
          style=":hover:background-color:red;"
        ></el-tab-pane>
      </el-tabs>
      <!-- 循环显示热卖商品 -->
      <div class="tupian" style="margin-right: 0px">
        <div>
          <img class="shangpintu" src="../../assets/111.png" alt="" />
        </div>
        <div style="margin-top: 10px">
          <span class="jiage">¥29.00</span>
          <span class="xiaobaoyou">包邮</span>
          <span class="fukuan">2万+人付款</span>
        </div>
        <div class="jieshao">
          <a href="#" class="jieshao">
            无袖背心男士夏季潮牌纯棉健身运动坎肩衣服打底男装白色短袖t恤
          </a>
        </div>
        <div style="margin-top: 10px">
          <i class="el-icon-s-unfold" style="color: red; font-size: 20px"></i>
          <a href="#" style="color: rgb(136, 136, 136); font-size: 10px"
            >星系尔旗舰店</a
          >
          <span class="didian">杭州</span>
        </div>

        <img class="xiaologo" src="../../assets/logo.png" alt="" />
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commodityData:[],
      activeName: '',//激活项
      //checkList:[], //baoyou div
      kind:'', //大类别
      noKind: true,//是否显示全部小类别
      type:[
        {
          下装:[
            "束腿裤",
            "紧身裤",
            "牛仔裤",
            "短裤",
            "西裤",
            "修身裤",
            "内裤"
            ],
          上衣:[
            "夹克",
            "t恤",
            "西服",
            "汗衫",
            "毛衫",
            "褂子",
            "卫衣",
            "棒球服",
            "POLO衫",
            "羽绒服",
            "棉服"
          ],
          饰品:[
            "手表",
            "帽子",
            "项链",
            "耳坠",
            "戒指",
            "纹身贴",
            "眼镜",
            "手链",
            "手环"
          ],
          鞋类:[
            "篮球鞋",
            "皮鞋",
            "帆布鞋",
            "豆豆鞋",
            "运动鞋",
            "马丁靴",
            "雨鞋",
            "板鞋"
          ]
        }
      ]
    };
  },
  mounted(){
    this.getAll()
  },
  methods:{
    test(t){
      console.log('测试点击事件');
      console.log('参数：',t);
    },
    getAll(){
      this.noKind = true
      this.kind = ''
    },
    //el-tabs 点击触发
    handleClick(tab, event) {
        //console.log(tab, event);
        this.kind = tab._props.label
        this.noKind = false
        this.getByKind(tab.name)
      },
      getAll(){
        this.axios.get('/commoditykind/getAllOnSaleCommodities').then(res=>{ 
          this.commodityData = res.data
        })
      },
      getByKind(kind){
        //console.log(kind);
        this.axios.get('/commoditykind/getAllOnSalesCommoditiesByKind?kind='+kind).then(res=>{ 
          this.commodityData = res.data
        })
      },
      getByType(type){
        console.log('-----type-----',type);
        //let type = this.$route.query.type
         this.axios.get('/commoditykind/getAllOnSalesCommoditiesByType?type='+type).then(res=>{ 
          this.commodityData = res.data
        })
      }
        // getTypes(k){
    //   this.axios.post(`/commoditykind/gettypes:kind=${k}`).then(res=>{
    //     this.types = res.data
    //   })
    // }
  }
  
};
</script>

<style>
.kind{
  margin-top: 10px;
}
 .alltypes{
   border: rgb(232, 232, 232) solid 1px;
   padding: 10px;
} 
.type{
  margin: 5px 15px 10px 0;
}
.setion{
  border: rgb(232, 232, 232) solid 1px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  width: 250px;
  height: 380px;
  margin-top: 20px;
  margin-right: 15px;
  margin-bottom: 20px;
  display: inline-block;
  border: 1px solid rgb(237, 237, 237);
}
.imagesetion{
  width: 250px;
  height: 250px;
}
.shangpintu {
  width: 100%;
  height: 100%;
  display: block;
}
.jiage {
  color: red;
  font-size: 18px;
  margin-left: 5px;
}
.xiaobaoyou {
  color: white;
  background-color: red;
  font-size: 13px;
  margin-left: 10px;
}
.fukuan {
  color: rgb(136, 136, 136);
  font-size: 10px;
  margin-left: 70px;
}
.jieshao {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  color: black;
  text-decoration: none;
}
.didian {
  color: rgb(136, 136, 136);
  font-size: 15px;
  margin-left: 120px;
}
.xiaologo {
  height: 25px;
  width: 25px;
  margin-top: 5px;
}
.tupian:hover {
  border: 1px solid red;
}
.haha {
  width: 75%;
  margin-left: 12.5%;
  display: flex;
}
.el-main {
  width: 78%;
  text-align: left;
  display: inline-block;
}
.youce {
  /* border: 1px solid red; */
  width: 18%;
  display: inline-block;
}
.zonghexinxi {
  background-color: rgb(245, 245, 245);
  color: black;
  border-color: rgb(245, 245, 245);
}
.baoyou {
  border: rgb(232, 232, 232) solid 1px;
  margin-top: 0px;
  padding: 8px;
  border-top: 0px;
  display: flex;
  flex-direction: row;
  margin-left: -18px;
}
.xiaohuihui {
  background-color: rgb(245, 245, 245);
  border: rgb(232, 232, 232) solid 1px;
  margin-top: 15px;
  padding: 5px;
  margin-left: -18px;
}
</style>